<template>
	<w-dailog v-model="dialogVisible" width="1200px" title="关联品项" heightFullscreen>
		<div class="create-organ">
			<fx-tree
				:treeData="tableTreeData"
				showCheckbox
				:showTreeWidthExtendBtn="false"
				@check="onTreeCheck"
			></fx-tree>
			<w-transfer
				v-model="listSelectIds"
				:tableColumn="tableColumn"
				:tableData="tableData"
				:filter="transferFilter"
				leftTitle="全部品项"
				rightTitle="选定品项"
			></w-transfer>
		</div>
		<template slot="footer">
			<el-button @click="onCancelClick">取消</el-button>
			<el-button type="primary" @click="onSaveClick">保存</el-button>
		</template>
	</w-dailog>
</template>
<script>
export default {
	name: 'workshop',
	data () {
		return {
			dialogVisible: false,
			tableTreeData: [{
				id: 'all',
				name: '全部',
				children: [{
					id: '1',
					name: '类别1',
					children: [{
						id: '1-1',
						name: '小类别1'
					}, {
						id: '1-2',
						name: '小类别2'
					}]
				}, {
					id: '2',
					name: '类别2'
				}, {
					id: '3',
					name: '类别1'
				}]
			}],
			treeCheckedKeys: [],
			tableColumn: [
				{ prop: 'code', label: '品项编号', required: true, width: '80px' },
				{ prop: 'name', label: '品项名称', required: true },
				{ prop: 'spec', label: '规格', required: true },
				{
					prop: 'inventory',
					label: '库存',
					required: true,
					formatter: row => row.inventory ? '充足' : '缺货'
				}
			],
			tableData: [{
				id: '1',
				code: '001',
				name: '苹果',
				spec: '斤',
				inventory: true,
				typeId: '1-2'
			}, {
				id: '2',
				code: '002',
				name: '香蕉',
				spec: '斤',
				inventory: false,
				typeId: '1-1'
			}],
			tableSearchKey: '',
			listSelectIds: []
		}
	},
	created () {
	},
	methods: {
		open () {
			this.listSelectIds = ['1']
			this.dialogVisible = true
		},
		onTreeCheck (data, { checkedKeys }) {
			this.treeCheckedKeys = checkedKeys
		},
		transferFilter (item) {
			return this.treeCheckedKeys.length === 0 || this.treeCheckedKeys.includes(item.typeId)
		},
		onSaveClick () {
			console.log(this.listSelectIds)
		},
		onCancelClick () {
			this.dialogVisible = true
		}
	}
}
</script>
<style lang="stylus" scoped>
@import '~$assets/stylus/varsty.styl';
.create-organ {
	flex: 1
	display: flex;
	flex-direction: row;
	overflow: auto;
	width: 100%
}
</style>

